<template>
  <div class="container">
    <van-image class="banner" src="https://cdn.uj.cn/static/zhiyecn/hft-enterprise/course_banner.png"></van-image>

    <div class="tab-box">
      <div
        :class="['tab-item', {'active': tabActive === item.value}]"
        v-for="(item, index) of categoryList"
        @click="changeTab(item.value)"
        :key="index">{{ item.label }}
      </div>
    </div>

    <div class="list-box">
      <div
        class="list-item"
        v-for="(item, index) of courseList"
        :key="index"
        @click="handleToPlanCourseDetails(item)"
      >
        <van-image width="3.267rem" height="1.827rem" radius="0.133rem" :src="item.pic"/>
        <span class="item-tag">VIP·专享</span>
        <div class="item-info">
          <p class="ellipsis1 info-title">{{ item.title }}</p>
          <p class="info-view">{{ item.viewCount || 0 }}人已学</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onlineActionTypes } from "@/repo/store/online";
import PlanAPI from "@/repo/api/PlanAPI";
import { Icon, Image, NavBar, Toast } from 'vant';
import { generateRouterPath } from "@/router/util";

export default {
  components: {
    [Icon.name]: Icon,
    [Image.name]: Image,
    [NavBar.name]: NavBar
  },
  data() {
    return {
      tabActive: null,
      categoryList: [],
      courseList: []
    };
  },

  mounted() {
    this.getCategoryList();
  },

  methods: {
    changeTab(val) {
      if (val === this.tabActive) return;
      this.tabActive = val;
      this.getCourseList(val);
    },

    getCategoryList() {
      this.$store.dispatch(`online/${ onlineActionTypes.GET_ASSOCIATION_PlAN }`)
        .then(() => {
          let categoryList = this.$store.getters['online/associationPlanList'];
          this.categoryList = Object.keys(categoryList).map(item => {
            return { label: item, value: categoryList[item][0] };
          });
          this.changeTab(this.categoryList[0].value);
        });
    },

    getCourseList(id) {
      Toast.loading({ forbidClick: true, duration: 0 });
      PlanAPI.getPlanDetail(id).then(result => {
        let { responseData: { subjectList = [] } } = result;
        this.courseList = subjectList;
      }).finally(() => Toast.clear());
    },

    /**
     * 跳转房产大学课程详情
     * @param data
     */
    handleToPlanCourseDetails(data) {
      this.$router.push({
        path: generateRouterPath(`/course/courseDetail/${ data.id }`),
        query: {
          enterStatus: 1
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  padding: 0 20px;
  box-sizing: border-box;
  background: #ffffff;
  display: flex;
  flex-direction: column;

  .banner {
    margin: 10px 0;
  }

  .tab-box {
    display: flex;
    align-items: center;
    overflow-x: auto;
    flex-shrink: 0;

    &::-webkit-scrollbar {
      width: 0;
    }

    .tab-item {
      font-size: 14px;
      color: #a3a5a8;
      padding: 10px;
      flex-shrink: 0;

      &.active {
        font-size: 17px;
        color: #191f25;
        font-weight: bold;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          width: 13px;
          height: 3px;
          border-radius: 1.5px;
          background: #3396fb;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }

  .list-box {
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
    margin: 0 -20px 0;
    padding: 0 20px 20px;

    .list-item {
      display: flex;
      padding: 10px 0;
      position: relative;

      .item-tag {
        position: absolute;
        top: 10px;
        left: 0;
        color: #76380a;
        font-size: 9px;
        background: #ffdc99;
        border-radius: 5px 0 5px 0;
        font-weight: bold;
        padding: 2.5px 4.5px;
      }

      .item-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 10px 0 10px 13px;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 1px;
          background: #ebebeb;
          bottom: -20px;
          right: 0;
        }

        .info-title {
          font-size: 14px;
          color: #191f25;
          font-weight: bold;
        }

        .info-view {
          font-size: 11px;
          color: #7e8184;
        }
      }
    }
  }
}
</style>
